<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网页拖拽效果</title>
<script defer type="text/javascript">
	var draged = false;			//表示状态是否在拖动状态
	adiv = null;
	/*
	将各个栏目的div与鼠标按下、拖动、拖动结束3个事件鱼三个方法进行绑定
	只绑定className为columns的div
	*/
	function init()
	{
		//获取网页中所有的div
		var allDivs = document.getElementsByTagName("div");
		for(var i = 0;i<allDivs.length;i++)
		{
			if(allDivs[i].className != "columns") continue;
				//ie
				if(window.ActiveXObject)
				{
					//只绑定className为columns的div
					allDivs[i].attachEvent("onmousedown", dragStart);	//绑定鼠标按下事件
					allDivs[i].attachEvent("ondrag", draging);			//绑定拖动事件
					allDivs[i].attachEvent("ondragend", dragEnd);		//绑定拖动结束事件
				} else 
				{
					//只绑定className为columns的div
					allDivs[i].addEventListener("mousedown", dragStart);	//绑定鼠标按下事件
					allDivs[i].addEventListener("drag", draging);			//绑定拖动事件
					allDivs[i].addEventListener("dragend", dragEnd);		//绑定拖动结束事件
					//alert("绑定成功");
				}
		}
	}

	/*
	鼠标按下时触发的方法
		新建一个div，将要移动的div内容付给它，并使移动的div处于移动状态
	*/
	function dragStart()
	{
		//todo: firefox的支持
		ao = event.srcElement;					//获取鼠标点击事件
		if(ao.className != "columns") return;
		draged = true;							//标记为开始拖动
		adiv = document.createElement("div");	//创建一个div
		adiv.innerHTML = ao.outerHTML;			//将要拖动的内容付给这个div
		//以下为设定这个div的属性
		adiv.style.display = "block";
		adiv.style.position = "absolute";
		adiv.style.filter = "alpha(opacity=70)";//设置为半透明
		adiv.style.cursor = "move";				//可移动光标图案
		adiv.style.width =  ao.offsetWidth;		
		adiv.style.height = ao.offsetHeight;
		adiv.style.top = getPosition(ao).top;	//获取点击div的位置
		adiv.style.left = getPosition(ao).left;
		var b = document.body;					//document.body.appendChild(adiv) 不能用啊？
		b.appendChild(adiv);
		lastX = event.clientX;
		lastY = event.clientY;
		lastLeft = adiv.style.left;
		lastTop = adiv.style.top;
		try
		{
			ao.dragDrop();						//使点击的div处于拖动状态
		} catch(e){}
	}

	/*
	将要移动的div内容放在要拖动到的位置
	*/
	function draging()
	{
		if(!draged) return;
		var tX = event.clientX;
		var tY = event.clientY;
		adiv.style.left = parseInt(lastLeft) + tX - lastX;
		adiv.style.top = parseInt(lastTop) + tY - lastY;
		var rowsDivs = document.getElementsByTagName("div");
		for(var i = 0;i<rowsDivs.length;i++)
		{
			if(rowsDivs[i].className != "rows") continue;
			//获取这个div的位置
			var parentDiv = getPosition(rowsDivs[i]);
			//判断目前鼠标的位置在哪个列中
			if(tX >= parentDiv.left && tX<=parentDiv.right && tY >= parentDiv.top && tY <= parentDiv.bottom)
			{
				//在其中的一个列中
				var columnDivs = rowsDivs[i].getElementsByTagName("div");
				//如果该列中没有div,即没有栏目
				if(columnDivs.length == 0)
				{
					if(tX >= parentDiv.left && tX <= parentDiv.right && tY >= parentDiv.top && tY <= parentDiv.bottom)
					{
						//则将要移动的div添加进这一列
						rowsDivs[i].appendChild(ao);
					}
					break;
				}
				//如果该列中有栏目
				for(var j = 0;j < rowsDivs.length; j++)
				{
					//获取每个栏目的位置
					var column = getPosition(rowsDivs[j]);
					//如果鼠标在其中的一个栏目中，则将要移动的栏目添加在这个栏目前
					if(tX >= column.left && tX <= column.right && tY >= column.top && tY <= column.bottom)
					{
						rowsDivs[i].insertBefore(ao, columnDivs[j]);
						break;
					//如果不在，则添加到这个栏目后
					} else 
					{
						rowsDivs[i].appendChild(ao);
					}
				}
			}
		}
	}

	/*
	消除新建的div，并恢复原来的位置
	*/
	function dragEnd()
	{
		if(!draged) return;
		draged = false;			//状态为拖动结束
		mm = rollback(150,15);	
	}

	/*
	取得一个对象的坐标
	*/
	function getPosition(o)
	{
		var to = new Object();
		to.left = to.right = to.top = to.bottom = 0;
		var twidth = o.offsetWidth;
		var theight = o.offsetHeight;
		while( o!= document.body)
		{
			to.left = to.left + o.offsetLeft;
			to.top += o.offsetTop;
			o = o.offsetParent;
		}
		to.right = to.left + twidth;
		to.bottom = to.top + theight;
		return to;
	}

	/*
	用于恢复位置
	*/
	function rollback(aa, ab)
	{
		var ac = parseInt(getPosition(adiv).left);		//获取新建div的左坐标
		var ad = parseInt(getPosition(adiv).top);		//获取新建div的上坐标
		var ae = (ac - getPosition(ao).left)/ab;
		var af = (ad - getPosition(ao).top)/ab;
		
		return setInterval(function (){if(ab < 1){ 		//直到新建的Div消失??
					clearInterval(mm);
					adiv.removeNode(true);			//移除新建div的结点
					ao = null;
					return
				}
				ab--;
				ac -= ae;
				ad -= af;
				adiv.style.left = parseInt(ac) + "px";
				adiv.style.top = parseInt(ad) + "px"
		
			}
		,aa/ab)
	}

	init();
</script>
</head>
<body>
	<!--  id为master的div用来定位其他div -->
	<div id="master" style="float:left;width:100%;height=100%;border:2px solid #BA5B57;">
		<!-- 表示一列，为左边一列 -->
		<div class="rows" style="float:left;width:33%;height:500;border:2px solid red;">
			<!-- 表示一个栏目，开心数独栏目 -->
			<div class="columns" style="width:100%;border:4px solid  yellow">
				开心数独
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<iframe src="sudoku.html"></iframe>
			</div>
			<!--  表示一个栏目，谷歌生活-资讯栏目-->
			<div class="columns" style="width:100%;border:4px solid  yellow">
				谷歌生活-资讯
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<iframe src="verticalSearch.html"></iframe>
			</div>
		</div>
		
		<!-- 表示一列，为中间一列 -->
		<div class="rows" style="float:left;width:33%;height:500;border:2px solid red;">
		</div>
		
		<!-- 表示一列，为右边一列 -->
		<div class="rows" style="float:left;width:33%;height:500;border:2px solid red;">
			<!-- 表示一个栏目，谷歌财经栏目 -->
			<div class="columns" style="width:100%;border:4px solid  yellow">
				谷歌财经
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<iframe src="finance.html"></iframe>
			</div>
			<!-- 表示一个栏目，谷歌翻译栏目 -->
			<div class="columns" style="width:100%;border:4px solid  yellow">
				谷歌翻译
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<div style="width:100%;border:2px solid red;">
				</div>
				<iframe src="translate.html"></iframe>
			</div>
		</div>
	</div>
</body>
</html>